<template>
	<block v-if="check">
		<web-view src="https://alumni.snare.org.cn:8093"></web-view>
	</block>
	<block v-else>
		<view class="padding-tb">
			<block v-if="trendList != null && trendList.length > 0">
				<view class="cu-card dynamic no-card">
					<view class="cu-item shadow" style="margin-bottom:8px" v-for="(item,index) in trendList"
						:key="index">
						<view class="cu-list menu-avatar">
							<view class="cu-item no-bottom-border" @click="goUcenter(item.uid)">
								<view class="cu-avatar round lg"
									:style="'background-image:url('+item.cardDTO.avatar+');'">
								</view>
								<view class="content flex-sub">
									<view v-if="item.cardDTO">{{item.cardDTO.realName || '未知用户'}}</view>
									<view class="text-gray text-df flex justify-between">
										{{item.cardDTO.studentList[0].graduationYear}}届
										{{item.cardDTO.studentList[0].position}}
										{{item.cardDTO.studentList[0].graduationClass}}
									</view>
								</view>
							</view>
						</view>
						<view class="text-content" @click="goDetail(item.id)">
							{{item.title || ''}}</br>
							{{item.content}}
						</view>
						<block v-if="item.mediaList && item.mediaList.length>0">
							<view class="grid flex-sub padding-lr"
								:class="item.mediaList.length>1?'col-3 grid-square':'col-1'">
								<view v-for="(mediaItem,mediaIndex) in item.mediaList" :key="mediaIndex" class="bg-img"
									:class="item.mediaList.length>1?'':'only-img'"
									:style="'background-image:url('+mediaItem.previewUrl+'?thumb=1);'"
									@tap="ViewImage(item.mediaList,mediaIndex)" :data-url="mediaItem.previewUrl">
								</view>
							</view>
						</block>
						<view class="flex justify-between text-gray padding">
							<view class="text-left text-df" @click="goDetail(item.id)">
								{{item.createTime}}
							</view>
							<view class="text-right text-xxl">
								<!-- <text class="cuIcon-attentionfill margin-lr-xs"></text> 10 -->
								<text class="cuIcon-appreciatefill margin-left" :class="item.hasPraise ? 'text-red':''"
									@click="onPraise(item.id,index)" />
								<text class="margin-left-xs">{{item.praiseCnt}}</text>
								<text class="cuIcon-messagefill margin-left" @click="goDetail(item.id)" />
								<text class="margin-left-xs">{{item.commentCnt}}</text>
							</view>
						</view>

					</view>
				</view>
				<uni-load-more :status="loadStatus"></uni-load-more>
			</block>
			<block v-else>
				<view class="padding-xs align-center">
					<view class="flex-sub text-center padding-top-xl">
						<view class="solid-bottom text-xsl padding">
							<text class=" cuIcon-new text-red"></text>
						</view>
						<view class="padding text-grey">这里还空空如也，赶快说点什么吧</view>
					</view>
				</view>
			</block>
			<!-- 发布按钮 -->
			<view class="edit tnxuanfu" @tap="goApply" v-if="!optionModal">
				<view class="bg0 pa">
					<view class="bg1">
						<image src="/static/apply.png" class="button-shop shadow"></image>
					</view>
				</view>
				<view class="hx-box pa">
					<view class="pr">
						<view class="hx-k1 pa0">
							<view class="span"></view>
						</view>
						<view class="hx-k2 pa0">
							<view class="span"></view>
						</view>
						<view class="hx-k3 pa0">
							<view class="span"></view>
						</view>
						<view class="hx-k4 pa0">
							<view class="span"></view>
						</view>
						<view class="hx-k5 pa0">
							<view class="span"></view>
						</view>
						<view class="hx-k6 pa0">
							<view class="span"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</block>
</template>

<script>
	import {
		trend_page
	} from '@/common/api/api.js';
	import {
		trend_praise
	} from '@/common/api/sns.js';

	export default {
		components: {},
		data() {
			return {
				check: getApp().globalData.check,
				optionModal: false,
				cardInfo: uni.getStorageSync("cardInfo"),
				loadStatus: 'more',
				trendList: [],
				params: {
					pageNo: 1,
					pageSize: 10
				},
			};
		},
		onLoad() {},
		// onReachBottom() {
		// 	this.getData()
		// },
		onShow() {},
		methods: {
			init() {
				this.getData()
				this.cardInfo = uni.getStorageSync("cardInfo")
			},
			getData() {
				this.loadStatus = "loading"
				trend_page(this.params).then(res => {
					let data = this.$s.res(res).records
					if (data.length > 0) {
						if (this.params.pageNo == 1) {
							this.trendList = data
						} else {
							this.trendList = this.trendList.concat(data)
						}
						if (data.length < this.params.pageSize) {
							this.loadStatus = "noMore"
						} else {
							this.loadStatus = "more"
						}
						this.params.pageNo = this.params.pageNo + 1
					} else {
						this.loadStatus = "noMore"
					}
				}).catch(err => {
					this.loadStatus = "noMore"
				})
			},
			ViewImage(e, index) {
				let urlArr = []
				e.forEach(item => {
					urlArr.push(item.previewUrl)
				})
				uni.previewImage({
					urls: urlArr,
					current: index
				});
			},
			goApply() {
				if (this.checkCard()) {
					uni.navigateTo({
						url: '/pagesB/sns/trend/apply'
					})
				}
			},
			goDetail(e) {
				if (this.checkCard()) {
					uni.navigateTo({
						url: "/pagesB/sns/trend/detail?id=" + e
					})
				}
			},
			onPraise(e, index) {
				if (this.checkCard()) {
					trend_praise({
						trendId: e
					}).then(res => {
						if (this.$s.suc(res)) {
							this.trendList[index].hasPraise = !this.trendList[index].hasPraise
							this.trendList[index].praiseCnt = !this.trendList[index].hasPraise ?
								this.trendList[index].praiseCnt - 1 : this.trendList[index].praiseCnt + 1
						}
					})
				}
			},
			checkCard() {
				if (this.cardInfo == null || this.cardInfo.status != '2') {
					uni.showToast({
						icon: 'none',
						title: '请先领取校友卡享受更多权益'
					})
					return false
				} else {
					return true
				}
			},
			goUcenter(e) {
				// uni.navigateTo({
				// 	url: '../ucenter?uid=' + e
				// })
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	/* 按钮 */
	.edit {
		bottom: 300rpx;
		right: 75rpx;
		position: fixed;
		z-index: 9999;
	}

	/* 悬浮 */
	.tnxuanfu {
		animation: suspension 3s ease-in-out infinite;
	}

	@keyframes suspension {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-0.8rem);
		}
	}

	/* 悬浮按钮 */
	.button-shop {
		width: 90rpx;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		position: fixed;
		/* bottom:200rpx;
	  right: 20rpx; */
		left: 5rpx;
		top: 5rpx;
		z-index: 1001;
		border-radius: 100px;
		opacity: 0.9;
	}

	.pa,
	.pa0 {
		position: absolute
	}

	.pa0 {
		left: 0;
		top: 0
	}


	.bg0 {
		width: 100rpx;
		height: 100rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.bg1 {
		width: 100%;
		height: 100%;
	}

	.hx-box {
		top: 50%;
		left: 50%;
		width: 100rpx;
		height: 100rpx;
		transform-style: preserve-3d;
		transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
	}

	.hx-box .pr {
		width: 100rpx;
		height: 100rpx;
		transform-style: preserve-3d;
		animation: hxz 20s linear infinite;
	}

	@keyframes hxz {
		0% {
			transform: rotateX(0deg);
		}

		100% {
			transform: rotateX(-360deg);
		}
	}



	.hx-box .pr .pa0 {
		width: 100rpx;
		height: 100rpx;
		/* border: 4px solid #5ec0ff; */
		border-radius: 1000px;
	}

	.hx-box .pr .pa0 .span {
		display: block;
		width: 100%;
		height: 100%;
		background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc4.png) no-repeat center center;
		background-size: 100% 100%;
		animation: hx 4s linear infinite;
	}

	@keyframes hx {
		to {
			transform: rotate(360deg);
		}
	}

	.hx-k1 {
		transform: rotateX(-60deg) rotateZ(-60deg)
	}

	.hx-k2 {
		transform: rotateX(-30deg) rotateZ(-30deg)
	}

	.hx-k3 {
		transform: rotateX(0deg) rotateZ(0deg)
	}

	.hx-k4 {
		transform: rotateX(30deg) rotateZ(30deg)
	}

	.hx-k5 {
		transform: rotateX(60deg) rotateZ(60deg)
	}

	.hx-k6 {
		transform: rotateX(90deg) rotateZ(90deg)
	}

	.cu-item.no-bottom-border::after {
		border-bottom: 0
	}
</style>